@import './variable.scss'; // css变量

.form-wrap {
    background-color: #fff;
}

.form-line {
    // margin-top:.3rem;
    justify-content: space-between;

    // 勿删！！！
    // justify-content: flex-start;
    // flex-direction: wrap;
    // flex-flow:column wrap;
    &:first-child {
        margin-top: 0;
    }

    $labelW:1.7rem;
    $lineH:.8rem;

    .input-wrap {
        // 勿删！！！
        // margin-bottom: .2rem;
        width: 50%;
        overflow: hidden;
        border-bottom: 1px solid $borderColor !important;

        .label,
        .input-cls {
            vertical-align: middle
        }

        .label {
            display: inline-block;
            margin: 0;
            padding: 0;
            width: $labelW;
            height: $lineH;
            line-height: $lineH;
            font-size: .3rem;
            text-align: right;
            color: #828282;
        }

        .input-cls {
            margin: 0;
            padding: 0 .1rem;
            height: $lineH;
            line-height: $lineH;
            width:calc(100% - #{$labelW} - 6%);
            border: none;
            background: none;
        }
    }

    .input-wrap0 {
        $labelW0: 2rem;

        .label {
            width: $labelW0;
        }

        .input-cls {
            width:calc(100% - #{$labelW0} - 6%);
        }
    }

    .input-wrap1 {
        $labelW1: 2.2rem;

        .label {
            width: $labelW1;
        }

        .input-cls {
            width:calc(100% - #{$labelW1} - 6%);
        }
    }

    .navigate-right {
        position: relative;
    }

    .navigate-right::after {
        content: '\e583';
        position: absolute;
        top: .2rem;
        right: .16rem;
        display: inline-block;
        color: #bdbdbd;
        font-family: Muiicons;
        font-size: .4rem;
    }

    // textarea
    .textarea-wrap {
        width: 100%;

        .label {
            vertical-align: top;
        }

        .textarea-cls {
            margin: 0;
            padding: .2rem;
            width:calc(100% - #{$labelW} - 4%);
            height: 2rem;
            line-height: .4rem;
            border-color: $borderColor;
        }
    }

    // radio
    // 一半
    .radio-wrap {
        display: inline-block;

        .radio-cls {
            display: inline-block;
            width:calc(100% - #{$labelW} - 2%);

            .radio-line {
                display: inline-block;
                width: 45%;

                input {
                    $wh: .3rem;
                    width: $wh;
                    height: $wh;
                }
            }
        }
    }

    // 整行
    .radio-wrap-full {
        display: inline-block;
        width: 100%;

        .radio-cls-box,
        .radio-cls {
            display: inline-block;
            width:calc(100% - #{$labelW} - 4%);
            vertical-align: middle;

            .radio-line {
                display: inline-block;
                width: 30%;
                height: $lineH;
                line-height: $lineH;

                input {
                    $wh: .3rem;
                    width: $wh;
                    height: $wh;
                }
            }
        }

        .radio-cls-box {
            .radio-cls {
                display: inline-block;
                width: 100%;

                .radio-line {
                    width: 48%;
                }
            }

        }
    }

    // select
    .select-wrap {
        .select-cls {
            display: inline-block;
            width:calc(50% - #{$labelW} - 2%);

            select {
                margin: 0;
                padding: 0 6px;
                height: $lineH;
                // line-height:$lineH;
                // border:1px solid rgb(204, 204, 204) !important;
            }
        }
    }

    .select-wrap-full {
        width: 100%;

        .select-cls {
            display: inline-block;
            width:calc(100% - #{$labelW} - 2%);

            select {
                margin: 0;
                padding: 0 6px;
                height: $lineH;
                // line-height:$lineH;
                // border-bottom:1px solid rgb(204, 204, 204) !important;
            }
        }
    }

    // checkbox
    // 一半
    .checkbox-wrap {
        display: inline-block;

        .label {
            width: auto;
        }

        .checkbox-cls {
            display: inline-block;
            // width:calc(100% - #{$labelW} - 2%);



            .checkbox-line {
                display: inline-block;

                input {
                    $wh: .35rem;
                    width: $wh;
                    height: $wh;
                }
            }
        }
    }

    .button-wrap {
        justify-content: space-around;
    }
}

// 行标签提示
.tip-line {
    $tipBgColor: #f5f4f4;
    position: relative;
    padding: 0 .2rem;
    line-height: .6rem;
    color: #6A98CA;
    font-size: .3rem;
    background-color: $tipBgColor;
    border-radius: .1rem;
    box-shadow: 0 5px 10px 0px #ccc;

    .arrow-icon-cls {
        display: inline-block;
        content: '';
        position: absolute;
        top: -0.22rem;
        left: 23%;
        width: 0;
        height: 0;
        border-width: 0 .3rem .3rem;
        border-style: solid;
        border-color: transparent transparent $tipBgColor;
    }

    .text {
        padding-left: .05rem;
    }
}

.no-border {
    border: none !important;

    .input-wrap {
        border: none !important;
    }
}

.pic-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: .148rem 0;
    overflow: hidden;
    text-align: center;
    background: #fff;

    .pic-grid-item {
        $imgWH: calc(2.39rem - 3.5px);
        position: relative;
        margin: 2px;
        float: left;
        width: $imgWH;
        height: $imgWH;
        text-align: center;
        box-sizing: border-box;
        background-size: cover;
        background-position: center center;
        background-color: $bgColor;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .no-pic {
        .add-box {
            position: relative;
            padding: 0.074rem;
            margin: 0;
            width: 100%;
            text-align: center;
            min-height: 2rem;
            box-sizing: border-box;
            border: 1px dashed $mainColor;
            background-color: #fff;

            .no-pic-type {
                display: inline-block;
            }

            .has-pic-type {
                display: none;
            }
        }
    }

    .close-icon {
        $wh: .4rem;
        position: absolute;
        top: -0.074rem;
        right: -0.074rem;
        width: $wh;
        height: $wh;
        line-height: .3rem;
        text-align: center;
        color: #fff;
        font-size: .3rem;
        font-style: normal;
        background-color: #7785e6;
        border-radius: 50%;
    }

    .add-btn {
        line-height: 2.4rem;
        font-size: 1rem;
        text-align: center;
        background-size: 28%;
        background-repeat: no-repeat;
        background-position: center 41%;
    }

    .space-add-box {
        position: relative;
        padding: 0.074rem;
        width: 100%;
        text-align: center;
        min-height: 2rem;
        box-sizing: border-box;
        border: 1px dashed $mainColor;
        background-color: #fff;
    }

    .camera-icon {
        display: block;
        margin-top: .2rem;
        width: 2rem;
        height: 1.2rem;
        color: $mainColor;
        font-size: 1rem;
        background-color: #fff;
        background-size: 60%;
        background-position: 50% 30%;
        background-repeat: no-repeat;
    }

    .upload-tip-txt {
        display: block;
    }

    .file-input {
        position: absolute;
        width: 90%;
        height: 90%;
        top: 5%;
        left: 5%;
        outline: none;
        background-color: transparent;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
    }

}

// 详情列表
.detail-list {
    .line {
        $labelW: 1.5rem;

        .label-cls,
        .value-cls {
            display: inline-block;
            font-size: .3rem;
        }

        .label-cls {
            width: $labelW;
            text-align: right;
        }

        .value-cls {
            padding-left: .1rem;
            width:calc(100% - #{$labelW} - 6%);
        }
    }

    .line1 {
        $labelW: 1.8rem;

        .label-cls,
        .value-cls {
            font-size: .3rem;
        }

        .label-cls {
            width: $labelW;
        }

        .value-cls {
            width:calc(100% - #{$labelW} - 6%);
        }
    }
}

.list-box {
    margin-top: .2rem;
    overflow: hidden;
    font-size: .3rem;
    background: #fff;

    &:first-child {
        margin: 0;
    }

    $h: .6rem;

    .line {
        width: 100%;
        height: $h;
        line-height: $h;
        color: #737272;

        .label-cls {
            color: #333;
            font-size: .3rem;
        }
    }
    .title-line {
        justify-content: space-between;

        .tit {
            font-weight: bold;
        }

        .icon-time {
            font-size: .35rem;
        }
    }

    .btn-line {
        padding: .2rem 0;
        justify-content: flex-end;

        .btn {
            margin-right: .1rem;

            a {
                color: #fff;
            }
        }
    }

    .line-detail {
        height: auto;

        .label-cls {
            text-align: right;
        }

        .value-cls {
            height: auto;
            word-wrap: break-word;
            word-break: break-all;
        }
    }
}

.list-box .line-title,
.line-title {
    $h: .8rem;
    width: 100%;
    height: $h;
    line-height: $h;
    font-weight: bold;
    font-size: .34rem;

    i.iconfont {
        font-size: .36rem;
        color: $mainColor;
    }

    span {
        color: $mainColor;
    }
}

.dialog-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.4);

    .dialog-wrap {
        margin: 0 auto;
        margin-top: 45%;
        padding: .2rem;
        width: 90%;
        background: #fff;
        border-radius: .08rem;

        .dialog-head {
            margin: 0 auto;
            width: 60%;
            height: .6rem;
            line-height: .6rem;
            font-size: .34rem;
            text-align: center;
        }

        .dialog-body textarea {
            padding: .2rem;
            width: 100%;
            height: 3rem;
            border: 1px solid #f9f9ff;
        }
    }
}


// 搜索框
.search-box {
    margin: 0;
    margin-bottom: .1rem;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;

    .search-btn {
        width: 20%;
        height: $headerH;
        line-height: $headerH;
        text-align: center;
        color: #fff;
        font-size: .36rem;
        background-color: $mainColor;
        border: 1px solid #efeded;
    }

    .input-box {
        margin: 0;
        padding: 0;
        width: 80%;
        height: $headerH;
        overflow: hidden;
        color: #E9E7E7;
        border: 1px solid #E9E7E7;

        .search-input {
            margin: 0;
            padding: 0;
            width: 80%;
            height: $headerH;
            line-height: $headerH;
            color: #333;
            border: none;
        }

        .search-icon,
        .clean-icon {
            display: inline-block;
            width: 9%;
            height: $headerH;
            line-height: $headerH;
            font-size: .4rem;
            text-align: center;
        }

        .clean-icon {
            display: none;
        }
    }
}